<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style:none
			}
			
			a{
				text-decoration:none;
			}
			input{
				outline: none;
			}
			.clearfix:after{
				content: " ";
				display: table;
				clear:both;
			}
			#box{
				position: relative;
				overflow: hidden;
				width: 600px;
				height: 600px;
				margin: 50px auto;
			}
			#box .list{
				position: absolute;
				top:0;
				left:-600px;
				width:4200px;
				height: 600px;
			}
			#box li {
				float:left;
				height: 600px;
				width: 600px;
			}
			#box .list li img{
				height:600px;
				width: 600px;
			}
			#box span {
				position: absolute;
				top:50%;
				transform:translateY(-50%) ;
				width:50px;
				height: 100px;
				background-color: rgba(200,200,200,.6);
				font-size: 50px;
				text-align: center;
				color:white;
				line-height: 100px;
				opacity: 0;
				transition: opacity 2s;
			}
			#box .right{
				right:0
			}
			#box .left{
				left:0
			}
			#box .iconList{
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				bottom:10px;
				overflow: hidden;
			}
			#box .iconList li {
				float:left;
				width:40px;
				height:40px;
				margin-left: 10px;
				border-radius:50%;
				background-color: gray;
			}
			#box .iconList li.current{
				background:red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul class="list">
				<li>
					<img src="./images/5.jpg" alt="">
				</li>
				<li>
					<img src="./images/1.png" alt="">
				</li>
				<li>
					<img src="./images/2.png" alt="">
				</li>
				<li>
					<img src="./images/3.png" alt="">
				</li>
				<li>
					<img src="./images/4.png" alt="">
				</li>
				<li>
					<img src="./images/5.jpg" alt="">
				</li>
				<li>
					<img src="./images/1.png" alt="">
				</li>
			</ul>
			<span class="left">&lt;</span>
			<span class="right">&gt;</span>
			<ul class="iconList">
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<script>
			var box = document.getElementById('box')
			var spanNode = document.querySelectorAll('#box span')
			//移入
			box.onmouseenter= function(){
				spanNode[0].style.opacity = 1 ;
				spanNode[1].style.opacity = 1;
			}
			//鼠标移出
			box.onmouseleave = function(){
				spanNode[1].style.opacity = 0;
				spanNode[0].style.opacity = 0;
			}
			//点击第一张图片被左移
			var ul = document.querySelector('#box .list');
			var span_list = document.querySelectorAll('span');
			//左侧点击
			span_list[1].onclick= function(){
				//一步走 20ms
				// var setpTime = 20;
				// var allTime = 600;
				// //一次走
				// var setpDis = -600
				// //最终走的距离
				// var ulLeft = ul.offsetLeft
				// var lastList = ulLeft + setpDis + 'px'
				// var timer = null
				// timer = setInterval(()=>{
				// 	//一共走多少次
				// 	var t = allTime / setpTime;
				// 	// var lastDis = setpDis / t //一次走多少距离 20px
				// 	// var ulLeft = ul.offsetLeft
				// 	// var lastList = ulLeft + lastDis + 'px'
				// 	var left = ul.offsetLeft - t + 'px'
				// 	if(lastList === left){
				// 		clearInterval(timer)
				// 	}
				// 	ul.style.left = left
				// },24)
				move(true)
			}
			//右侧点击
			span_list[0].onclick= function(){
				//一步走 20ms
				// var setpTime = 20;
				// var allTime = 600;
				// //一次走
				// var setpDis = 600
				// //最终走的距离
				// var ulLeft = ul.offsetLeft
				// var lastList = ulLeft + setpDis + 'px'
				// var timer = null
				// timer = setInterval(()=>{
				// 	//一共走多少次
				// 	var t = allTime / setpTime;
				// 	// var lastDis = setpDis / t //一次走多少距离 20px
				// 	// var ulLeft = ul.offsetLeft
				// 	// var lastList = ulLeft + lastDis + 'px'
				// 	var left = ul.offsetLeft + t + 'px'
				// 	if(lastList === left){
				// 		clearInterval(timer)
				// 	}
				// 	ul.style.left = left
				// },24)
				move(false)
			}
			function move(flag){
				//flag=true 向右
				if(flag){
					totalDis = -600
				}else{
					totalDis = 600
				}
				var allTime = 600
				var setpTime = 20
				var timer = null
				var ulLeft = ul.offsetLeft
				var lastSetp = ulLeft + totalDis 
				timer = setInterval(()=>{
					var t = totalDis/(allTime / setpTime)
					var left = ul.offsetLeft + t 
					if(left === lastSetp){
						clearInterval(timer)
						if(left === -3600){
							left = -600
						}else if(left === 0){
							left = -3000
						}
					}
					ul.style.left = left + 'px'
				},setpTime)
			}
		</script>
	</body>
</html>
